<template>
  <page-loading :show="dataObj">
    <view class="wrap" v-if="dataObj">
      <view class="header flex">
        <view class="width-40 font-bold">{{
          returnStatus(dataObj.status)
        }}</view>
        <view class="width-60 font-24 u-text-right" v-if="dataObj.status === 0">
          截止确认时间：
          <u-count-down
            :show-days="false"
            bg-color="#fbd220"
            :timestamp="dataObj.affirm_deadline"
          ></u-count-down>
        </view>
        <view class="width-60 font-24 u-text-right" v-if="dataObj.status === 5">
          截止付款时间：
          <u-count-down
            :timestamp="dataObj.pay_deadline"
            :show-days="false"
            bg-color="#fbd220"
          ></u-count-down>
        </view>
        <view class="width-60 font-24 u-text-right" v-if="dataObj.status === 20"
          >门店备货中，请耐心等待</view
        >
      </view>
      <!-- 待施工中 -->
      <view class="model mt-40" v-if="dataObj.status === 40">
        <view class="flex pad-t-b-20 font-28">
          <view class="width-50 color-333">
            <i-icon
              icon="icondengdai"
              class="middle mr-10"
              type="single"
              color="#666"
              size="40rpx"
            ></i-icon>
            排队情况
          </view>
          <view class="width-50 u-text-right color-666"
            >已等待{{ dataObj.queuedlist[lineUpcurrent].wait_time }}分钟</view
          >
        </view>
        <view class="pb-15">
          <view class="border-bottom-1">
            <u-tabs-swiper
              ref="tabs"
              :list="lineUpList"
              active-color="#FBB000"
              :current="lineUpcurrent"
              @change="lineUpChange"
              :is-scroll="false"
            ></u-tabs-swiper>
          </view>
          <view class="flex pad-t-b-10 flex-jc-sb">
            <view class="width-35 u-text-center">
              <view class="u-text-center">
                <text class="font-56 color-333 font-bold">{{
                  dataObj.queuedlist[lineUpcurrent].appoint_count
                }}</text>
                人
              </view>
              <view class="">预约</view>
            </view>
            <view class="width-35 u-text-center">
              <view class="">
                <text class="font-56 color-333 font-bold">{{
                  dataObj.queuedlist[lineUpcurrent].queued_count
                }}</text>
                人
              </view>
              <view class="">现场排队</view>
            </view>
            <view class="width-35 u-text-center">
              <view class="">
                <text class="font-56 color-333 font-bold">{{
                  dataObj.queuedlist[lineUpcurrent].average
                }}</text>
                分钟
              </view>
              <view class="">平均等待</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 服务中 -施工中 -预检 上检  完成 -->
      <view
        class="model mt-40"
        v-if="
          (dataObj.status === 50 || dataObj.status === 60) &&
          !dataObj.is_car_wash
        "
      >
        <view class="flex pad-t-b-20" v-if="dataObj.examinelist.length > 0">
          <view class="width-50 flex">
            <view
              :class="[
                'width-30 font-30 font-bold',
                checkInd === ins ? '' : 'color-999',
              ]"
              v-for="(it, ins) in dataObj.examinelist"
              @click="checkInd = ins"
              :key="ins"
            >
              {{ it.name }}
            </view>
          </view>

          <view
            class="width-50 flex u-text-right flex-jc-fe"
            v-if="checkInd !== 2"
          >
            <view class="labelyc"
              >异常（{{ dataObj.examinelist[checkInd].abnormal }}）</view
            >
            <view class="labelzc"
              >正常（{{ dataObj.examinelist[checkInd].normal }}）</view
            >
          </view>
        </view>

        <view class="pad-t-b-20" v-else>
          <view class="width-50 flex flex-jc-sa">
            <view
              class="font-30 color-999"
              v-for="(it, ins) in checkArrText"
              :key="ins"
              >{{ it }}</view
            >
          </view>
        </view>
        <view class="" v-if="dataObj.status === 50">
          <view class="pad-t-b-10 color-999 font-26"
            >7迈养车严格实行极致“三检”服务，请务必按照服务流程
            确认；如未确认，引发的纠纷由客户自行承担后果。</view
          >
          <view class="flex flex-jc-fe pad-t-b-10">
            <view
              class="btn-bg-yellow font-26"
              v-if="dataObj.examinelist.length > 0"
              @click="goReport(checkInd)"
            >
              <text
                v-if="
                  (checkInd === 0 && dataObj.is_precheck) ||
                  (checkInd === 1 && dataObj.is_inspection)
                "
                >查看报告</text
              >
              <text v-else
                >{{
                  dataObj.examinelist.length > 0
                    ? dataObj.examinelist[checkInd].name
                    : ""
                }}签字确认</text
              >
            </view>
            <view class="btn-bg-yellow font-26 bg666 color-fff" v-else
              >签字确认</view
            >
          </view>
        </view>
        <view class="flex" v-if="dataObj.status === 60">
          <view class="width-50">
            <view class="pad-t-b-10 width-100 u-text-left color-333"
              >服务质检</view
            >
            <view class="imgWrap1"
              ><image
                src="https://files.yzsheng.com/client/commodity/qualified.png"
                mode=""
              ></image
            ></view>
          </view>
          <view class="width-50">
            <view class="pad-t-b-10 width-100 u-text-left color-333"
              >质检员</view
            >
            <view class="imgWrap"
              ><image :src="dataObj.technician_signature_url" mode=""></image
            ></view>
          </view>
        </view>
        <view class="flex pad-t-b-20 flex-jc-fe" v-if="dataObj.status === 60"
          ><view class="btn-bg-yellow font-26" @click="goReport(2)"
            >查看报告</view
          ></view
        >
      </view>
      <!-- 待确认 -->
      <view
        :class="[
          'model',
          dataObj.status === 0 ||
          dataObj.status === 5 ||
          dataObj.status === 20 ||
          dataObj.status === 30 ||
          ((dataObj.status === 50 || dataObj.status === 60) &&
            dataObj.is_car_wash)
            ? 'mt-40'
            : '',
        ]"
      >
        <view class="flex pad-t-b-20 border-bottom-1 font-28 color-333"
          >服务门店</view
        >
        <view class="flex pad-t-b-20">
          <view class="width-75 color-999">
            <view class="color-333 font-30 font-bold pad-t-b-10">{{
              dataObj.store_name
            }}</view>
            <view class="color-333 font-24 width-95">{{
              dataObj.store_address
            }}</view>
          </view>
          <view
            class="width-25 color-333 u-text-center"
            @click="onClickNavigation"
          >
            <view class="pad-t-b-10 mt-15"
              ><i-icon
                icon="iconNav"
                class="middle"
                type="multiple"
                size="40rpx"
              ></i-icon
            ></view>
            <view class="">{{ dataObj.distance }}km</view>
          </view>
        </view>
        <view class="flex pad-t-b-10 border-bottom-1">
          <view
            class="width-50 u-text-center u-border-right"
            v-if="dataObj.status === 20 || dataObj.status === 30"
            @click="contact"
          >
            <i-icon
              icon="iconchat"
              class="middle mr-10"
              type="multiple"
              size="48rpx"
            ></i-icon>
            联系门店
          </view>
          <view
            class="width-50 u-text-center u-border-right"
            v-else
            @click="phoneClick(serviceNumber.number)"
          >
            <i-icon
              icon="iconkefu"
              class="middle mr-10"
              type="multiple"
              size="48rpx"
            ></i-icon>
            致电客服
          </view>
          <view
            class="width-50 u-text-center"
            @click="phoneClick(dataObj.store_mobile)"
          >
            <i-icon
              icon="iconphone"
              class="middle mr-10"
              type="multiple"
              size="48rpx"
            ></i-icon>
            致电门店
          </view>
        </view>
        <view class="flex pad-t-b-10">
          <view class="width-50 mt-10">{{ dataObj.account_name }}</view>
          <view class="width-50 mt-10 u-text-right">{{ dataObj.mobile }}</view>
        </view>
      </view>
      <!-- 待服务 选择预约时间 -->
      <view class="model" v-if="dataObj.status === 30">
        <view class="flex pad-t-b-20">
          <view class="width-20 font-28 color-333">预约到店</view>
          <view
            class="width-70 font-28 color-333 font-bold u-text-center"
            @click="timeStatus = true"
            >{{ showTime }}</view
          >
          <view class="width-10 u-text-right" @click="timeStatus = !timeStatus">
            <i-icon
              icon="iconxiala1"
              class="middle mr-10"
              type="single"
              color="#666"
              size="20rpx"
            ></i-icon>
          </view>
        </view>
        <view class=""
          ><pickerTime
            :show="timeStatus"
            @getTimeVal="getTimeVal"
            @close="timeStatus = false"
          ></pickerTime
        ></view>
      </view>
      <!-- 服务类型 -->
      <view class="model">
        <template>
          <view
            class=""
            v-for="(it, ind) in dataObj.maintenancetype"
            :key="ind"
          >
            <view class="pad-t-b-10">
              <view class="font-32 color-333">{{
                it.maintenance_type_name
              }}</view>
              <view class="mt-10" v-if="it.maintenance_remark">
                <!-- <text class="color-999">10000km或6个月</text> -->
                <text class="colFF4B44 ml-10">{{ it.maintenance_remark }}</text>
              </view>
            </view>
            <view
              class="flex pad-t-b-20 border-bottom-1"
              v-for="(mainItem, index) in it.goodsDetailslist"
              :key="index"
            >
              <view class="listImg" v-if="mainItem.goods_pic"
                ><image :src="mainItem.goods_pic" mode=""></image
              ></view>
              <view class="width-60 color-333">
                <view class="">{{ mainItem.goods_name }}</view>
              </view>
              <view
                :class="[
                  mainItem.goods_pic ? 'width-20' : 'width-40',
                  'veralign-end',
                ]"
              >
                <view class="u-text-right color-333 font-bold">
                  <text class="font-24">￥</text>
                  <text class="font-30">{{ mainItem.goods_price }}</text>
                  <text class="font-26 ml-10 color-999"
                    >x{{ mainItem.count }}</text
                  >
                </view>
              </view>
            </view>
          </view>
        </template>
        <template>
          <view class="server">
            <view class="" v-if="dataObj.servicelist.length > 0">
              <view
                class="flex border-bottom-1 pad-t-b-20"
                v-for="(it, ind) in dataObj.servicelist"
                :key="ind"
              >
                <view class="width-80">{{ it.service_name }}</view>
                <view class="width-20 u-text-right">
                  <text class="font-24">￥</text>
                  <text class="font-bold font-30">{{ it.service_price }}</text>
                  <text class="font-26 color-999 ml-20"
                    >x{{ it.service_count }}</text
                  >
                </view>
              </view>
            </view>
            <view class="flex border-bottom-1 pad-t-b-20">
              <view class="width-30"><text>运费</text></view>
              <view class="width-70 u-text-right">
                <text class="font-26">￥{{ dataObj.freight }}</text>
              </view>
            </view>
            <view
              class="flex border-bottom-1 pad-t-b-20"
              v-if="dataObj.discounts"
            >
              <view class="width-30"
                ><text class="font-28 color-333 font-bold">优惠券</text></view
              >
              <view class="width-70 u-text-right">
                <text class="font-26 color-666 ml-20">{{
                  dataObj.coupon_name
                }}</text>
                <text class="font-26 colFF4B44 ml-10 font-bold">{{
                  dataObj.discounts
                }}</text>
              </view>
            </view>
            <view class="flex pad-t-b-20 line48">
              <view
                class="width-60 u-text-right font-26"
                style="line-height: 52rpx"
              >
                已优惠:
                <text class="colFF4B44">￥{{ dataObj.discounts }}</text>
              </view>
              <view class="width-40 u-text-right">
                小计:
                <text class="font-34 color-333 font-bold"
                  >￥{{ dataObj.amount_payable }}</text
                >
              </view>
            </view>
          </view>
        </template>
      </view>
      <!-- 备注信息 -->
      <view class="model" v-if="dataObj.remark">
        <view class="pad-t-b-20"
          ><view class="color-333 font-28 font-bold">备注信息</view></view
        >
        <view class="pad-t-b-10 text-wrapper">{{ dataObj.remark }}</view>
      </view>
      <!-- 订单信息 -->
      <view class="pad-t-b-15 ml-20"
        ><view class="ml-10 width-80 color-333 font-28 font-bold"
          >订单信息</view
        ></view
      >
      <view class="model">
        <view class="flex pad-t-b-10">
          <view class="width-25">订单号：</view>
          <view class="width-75 flex">
            <text class="">{{ returntrim(dataObj.order_no) }}</text>
            <!-- #ifdef APP-PLUS -->
            <text class="copy" @click="copy(dataObj.order_no)">复制</text>
            <!-- #endif -->
          </view>
        </view>
        <view class="flex pad-t-b-10">
          <view class="width-25">下单时间：</view>
          <view class="width-75">{{ dataObj.addtime }}</view>
        </view>
        <view class="flex pad-t-b-10" v-if="dataObj.status == 0">
          <view class="width-25">导购员：</view>
          <view class="width-75">{{ dataObj.sales_name }}</view>
        </view>
        <view
          class="flex pad-t-b-10"
          v-if="
            dataObj.status !== 0 &&
            dataObj.status !== 5 &&
            returnPayTyper(dataObj.pay_type)
          "
        >
          <view class="width-25">支付方式：</view>
          <view class="width-75">{{ returnPayTyper(dataObj.pay_type) }}</view>
        </view>
        <view
          class="flex pad-t-b-10"
          v-if="
            dataObj.status !== 0 && dataObj.status !== 5 && dataObj.pay_time
          "
        >
          <view class="width-25">支付时间：</view>
          <view class="width-75">{{ dataObj.pay_time }}</view>
        </view>
        <view
          class="flex pad-t-b-10"
          v-if="dataObj.status === 60 && dataObj.accomplish_time"
        >
          <view class="width-25">完成时间：</view>
          <view class="width-75">{{ dataObj.accomplish_time }}</view>
        </view>
        <view class="flex pad-t-b-10" v-if="dataObj.status === 10">
          <view class="width-25">取消时间：</view>
          <view class="width-75">{{ dataObj.cancel_time }}</view>
        </view>
      </view>

      <!-- btn -->

      <!-- 待备货状态 -->
      <view class="model" v-if="dataObj.status === 20 || dataObj.status === 30">
        <view class="code">
          <view class="title">订单核销二维码</view>
          <image :src="dataObj.verify_qr_path" mode=""></image>
        </view>
      </view>
      <!-- 待确认 -->
      <template v-if="dataObj.status === 0">
        <view class="pad-t-b-15 ml-20"
          ><view class="ml-10 width-80 color-333 font-28 font-bold"
            >客户签字</view
          ></view
        >
        <view class="model">
          <view class="writeModel">
            <view class="writeImg" v-if="userWrite"
              ><image :src="userWrite" mode="widthFix"></image
            ></view>
            <view class="border-bottom-1 color-999" @click="goWrite" v-else
              >点击进入弹框签字</view
            >
            <view
              class="btn-bg-yellow bottomBtn"
              v-if="!write"
              @click="QuatationSure"
              >确认</view
            >
          </view>
        </view>
      </template>

      <!-- 待付款 -->
      <view
        class="fixedBottomBtn"
        v-if="dataObj.status === 0 || dataObj.status === 5"
      >
        <view class="btn bottomBtn">
          <view class="btnWrap flex">
            <view class="left width-50 line20">
              <view class="color-fff mt-5">
                <text class="font-24">合计：￥</text>
                <text class="font-34">{{ dataObj.amount_payable }}</text>
              </view>
              <view class="color-999">已优惠￥{{ dataObj.discounts }}</view>
            </view>
            <view class="width-25 middlebtn color-fff" @click="OrderCancel"
              >取消订单</view
            >
            <view
              class="right width-25"
              @click="gopay"
              v-if="(dataObj.status === 0 && write) || dataObj.status === 5"
              >去支付</view
            >
            <view class="right width-25 bg666" v-else>去支付</view>
          </view>
        </view>
      </view>
      <!-- 待备货 -->
      <view class="fixedBottomBtn" v-if="dataObj.status === 20">
        <view class="btn-bg-yellow bottomBtn btnbg333" @click="scan">
          <i-icon
            icon="iconsaoyisao"
            type="single"
            class="mr-5 middle"
            size="36rpx"
            color="#FBD220"
          ></i-icon>
          到店排队
        </view>
      </view>
      <!-- 待服务 -->

      <view class="fixedBottomBtn" v-if="dataObj.status === 30">
        <view class="btn bottomBtn">
          <view class="btnWrap flex">
            <view class="left width-50" @click="scan">
              <i-icon
                icon="iconsaoyisao"
                type="single"
                class="mr-5 middle"
                size="36rpx"
                color="#FBD220"
              ></i-icon>
              到店排队
            </view>
            <view class="right width-50" @click="OrderMakeAnAppointment">{{
              OrderMakeTimeStatus ? "取消预约到店" : "预约到店"
            }}</view>
          </view>
        </view>
      </view>
      <!-- 			服务中-排队中 -->
      <view class="" v-if="dataObj.status === 40">
        <view class="fixedBottomBtn"
          ><view
            class="btn-bg-yellow bottomBtn"
            @click="OrderMaintenanceCancelQueue"
            >取消排队</view
          ></view
        >
      </view>
      <template v-if="dataObj.status === 50 && !dataObj.is_car_wash">
        <!-- 服务中-排队中 -->
        <view class="fixedBottomBtn">
          <view
            class="btn-bg-yellow bottomBtn"
            v-if="dataObj.examinelist.length > 0"
            @click="goReport(checkInd)"
            >{{ dataObj.examinelist[checkInd].name }}签字确认</view
          >
          <view class="btn-bg-yellow bottomBtn bg666 color-fff">签字确认</view>
        </view>
      </template>

      <!-- 已完成 -->
      <view class="fixedBottomBtn" v-if="dataObj.status === 60">
        <view class="btn bottomBtn">
          <view class="btnWrap flex" v-if="!dataObj.is_car_wash">
            <view class="left width-35" @click="goOrderInvoice">开票</view>
            <view class="right width-65" @click="goReport(2)">查看报告</view>
          </view>
          <view class="tbn1" v-else @click="goOrderInvoice">开票</view>
        </view>
      </view>
      <!-- 待施工 -->
      <!-- 		<view class="fixedBottomBtn flex">
			<view class="bottomBtn2 line30" @click="more = !more">更多</view>
			<view class="btn-bg-yellow bottomBtn2">核销验码</view>
			<view class="btn-bg-yellow bottomBtn2" @click="Pregoods = !Pregoods">派工</view>
		</view> -->
      <!-- 更多列表 -->
      <!-- 	<view class="shadowWrap" v-if="more">
			<view class="shadow">
				<view class="list">派工</view>
				<view class="list">核销验码</view>
				<view class="list">完工未取车</view>
				<view class="list">完工已取车</view>
			</view>
			<view class="san"></view>
		</view> -->
    </view>
  </page-loading>
</template>

<script src="./maintenanceOrderDetail.js"></script>

<style lang="scss" scoped>
@import "./maintenanceOrderDetail.scss";
</style>
